<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>-
<%@ taglib prefix="aa" uri="/WEB-INF/tld/ajaxanywhere.tld" %>
<%@ taglib prefix="mytag" tagdir="/WEB-INF/tags" %>
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>jsp1</title>
<script src="/webjars/jquery/3.5.1/jquery.js"></script>
<script src="/aa.js"></script>
<link rel="stylesheet" href="/resources/css/bootstrap.min.css" />
<link rel="stylesheet" href="/resources/css/dashboard.css" />
<%@include file="./dialog/dialog.jsp"%>
</head>
<body>
	<h1>${msg}</h1>
	<button type="button" id="btPageQuery">分页查询列表</button>
 <aa:zone name="zoneP">
  <ul>
   <c:forEach var="o" items="${pagelist}" varStatus="s">
    <li>${(currentPage-1)*pageSize+s.index+1} , id: ${o.id} , name: ${o.name} ,createDate: ${o.createDate}</li>
   </c:forEach>
  </ul>
   <mytag:Page id="pagetest" count="${fn:length(list)}" pageSize="${pageSize}" currentPage="${currentPage}" useCallback="true" pageCallback="getPageList"/>
 </aa:zone>
	
<br />
 <button type="button" id="btQuery">查询列表</button>
 <aa:zone name="zoneJ">
  <ul>
   <c:forEach var="o" items="${list}" varStatus="s">
    <li>${s.count} , id: ${o.id} , name: ${o.name} ,createDate: ${o.createDate}</li>
   </c:forEach>
  </ul>
 </aa:zone>
 
 <button type="button" class="btn btn-primary" onclick = "openDialog();">
  选择1
</button>
 <button type="button" class="btn btn-primary" onclick = "openDialog2();">
  选择2
</button>
 
 <!-- Button trigger modal -->
<button type="button" style="display:none" class="btn btn-primary" onclick = "getModal({id:12,xm:'zhangsan'})">
  选择
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">确定</button>
      </div>
    </div>
  </div>
</div>
 
 
</body>
<script type="text/javascript">
 $('#btQuery').click(function() {
  ajaxAnywhere.getAJAX('/j/list', 'zoneJ');
 });
 
 $('#btPageQuery').click(function() {
  ajaxAnywhere.getAJAX('/j/pageList?pageSize=10&currentPage=1', 'zoneP');
 });
 function getPageList(obj){
   ajaxAnywhere.getAJAX('/j/pageList?pageSize='+obj.pageSize+"&currentPage="+obj.currentPage, 'zoneP');
 }
 
 $(function(){
    //esc不退出
 	$("#exampleModal").modal({keyboard:false,show:false})
 });
 
 var exampleModal = document.getElementById('exampleModal');
exampleModal.addEventListener('shown.bs.modal', function (event) {
  console.log(event);
});
 
 
 function getModal(obj){//打开模态框
   $("#exampleModal").modal('show');
 }
 
 //https://v5.bootcss.com/docs/5.1/components/modal/#events
 
 function openDialog(){
	dialog.show({   
		url : '/j/pageListDemo?pageSize=10&currentPage=2&callBack=dialogDemo',
		title : '测试窗口',
		width : 800,
		height : 550,
		scrolling : 'no'
	}, false);
 }
 
  function openDialog2(){
	dialog.show({   
		url : '/j/pageListDemo?pageSize=10&currentPage=2&callBack=dialogDemo2',
		title : '测试窗口',
		width : 800,
		height : 550,
		scrolling : 'no'
	}, false);
 }
 
 // 取消
    function dialogCancel(){
    	dialog.hide();
    }
    //确定
    function dialogDemo(obj){
    	console.log('dialogDemo选择对象为:',obj);
    	console.log(obj.id,obj.name);
    	dialog.hide();
    }
    //确定
    function dialogDemo2(obj){
    	console.log('dialogDemo2选择对象为:',obj);
    	dialog.hide();
    }
 
</script>
<script src="/resources/js/http.js"></script>
<script src="/resources/js/vue.global.prod.js"></script>
<script src="/resources/js/bootstrap.bundle.min.js"></script>
<script src="/resources/js/feather.min.js"></script>
</html>
